<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>课程信息查看</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/echarts.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <style>
    .box{
		position:fixed;
		right:10px;
		bottom: 20px;
		height:50px;
		width: 50px; 
		text-align:center;
		padding-top:20px; 
		background-color: lightblue;
	/*	transform: rotate(45deg);*/
		border-radius: 50%;
		overflow: hidden;
		
		}
	.box:hover:before{
		top:50%
		}
	.box:hover .box-in{
		visibility: hidden;
		}
	.box:before{
		position: absolute;
		top: -50%;
		left: 50%;
		transform: translate(-50%,-50%);
		content:'';
		width: 40px;
		color:peru;
		font-weight:bold;
		} 
	.box-in{
		visibility: visible;
		display:inline-block;
		height:20px;
		width: 20px;
		border: 3px solid black;
		border-color: white transparent transparent white;
		transform:rotate(45deg);
		}
    </style>
</head>

<body data-type="index" style="">
  <div id="box" class="box">
	<div class="box-in"></div>
	</div>  
	<!--浮窗-->
    <div style="position:fixed;height:50px;background:#ccc; opacity: 0.8; /* 搜索框半透明效果 */
  z-index: 10;width:100%;display:none" id="topbar">
    	<ol class="am-breadcrumb">
                <li><a href="#pos_intruduction" >课程简介</a></li>
                <li><a href="#pos_teaching_outline" >授课大纲</a></li>
                <li><a href="#pos_textbook">授课教材</a></li>
                <li><a href="#pos_reference_material">参考资料</a></li>
                <li><a href="#pos_teacher">授课教师</a></li>
            </ol>
    	
    </div>
    
    <div class="tpl-page-container">
            <div class="tpl-content-page-title">
                <p id="course_name"></p>   
            </div>
            
       		
          <!--  <div style="float:right">
                <a href="edit_course.html">
                    <i class="am-icon-adn"><span>底部</span></i>
                </a>
        	</div>-->
 
            
             
            <div class="tpl-content-scope">        
                <div id="pos_intruduction" class="tpl-portlet-components" style="height:auto; overflow:hidden; background: #fff;">
                        <!-- <div>
                            <a href="course.html">
                            <img style="width: 27%;height: 43%;float: left; " src="assets/img/timg.jpg">
                        </a>
                        </div> -->
                        <!--   <div style="float: left; width: 60%; margin-left: 10px" class="user_message"> -->
                        <div>
                            <h3><span class="close" data-close="note">课程简介</span></h3>
                            <p id="intruduction"></p> 
                            	
                            
                        </div>
                    </div>
            </div>
                
                <div id="pos_teaching_outline" class="tpl-portlet-components" style="height:auto; overflow:hidden; background: #fff;">
                    <div>
                        <h3><span class="close" data-close="note">授课大纲</span></h3>
                        <p id="teaching_outline"></p>
                    </div>
                    <!--
                    	<div class="row" style="height:500px;">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <tbody class="course_mess">
                                <tr>    
                                </tr>
                                <tr>
                                    <td class="am-hide-sm-only">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    -->
                        <div class="M-box" id="pagination"></div>
                    </div>
                
                
                <div id="pos_textbook" class="tpl-portlet-components" style="height:auto; overflow:hidden;background: #fff;">
                    <div>
                        <h3><span class="close" data-close="note">授课教材</span></h3>
                        <p id="textbook"></p>
                    </div>
                    <div>
                    	
                        <img id="picture_address" style="width: 27%;height: 43%;float: left; " >
                    </div>
                    <div style="float: left; width: 60%; margin-left: 10px" class="user_message">
                        <div>
                            
                        </div>
                    </div>
                </div>
                
                <div id="pos_reference_material" class="tpl-portlet-components" style="height:auto; overflow:hidden;background: #fff;">
                    <div>
                        <h3><span class="close" data-close="note">参考资料</span></h3>
                        <p id="reference_material"></p>
                    </div>
                    <div>
                        <span></span>             
                    </div>
                </div>
                
                <div id="pos_teacher" class="tpl-portlet-components" style="height: 150px;background: #fff;">
                    <div>
                        <h3><span class="close" data-close="note">授课教师</span></h3>
                        <p id="teacher"></p>
                    </div>
                    <div>
                        <span></span>                            
                    </div>
                </div>
    </div>
   
   
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <!--><script src="assets/js/iscroll.js"></script></!-->
        <script src="assets/js/app.js"></script>
        <script>
            
          $.ajax({
			type:"post",
			url:"/getCourseList",
                  contentType:"application/json;charset=utf-8",
			data:"",
			success:function(data) {
				formatJsonToSeries(data);
			}}
			); 
			
		  $.ajax({
			type:"post",
			url:"/getTeacherList",
                  contentType:"application/json;charset=utf-8",
			data:"",
			success:function(data2) {
				formatJsonToSeriesTeacher(data2);
			}}
			); 
				
			function formatJsonToSeries(data){
				//var  datac=  eval("("+data+")");
				$.each(data,function(i,item){
					$("#intruduction").text(item.introduction);
					$("#teaching_outline").text(item.teaching_outline);
					$("#textbook").text(item.textbook);
					$("#picture_address").attr("src",item.picture_address);
					$("#reference_material").text(item.reference_material);
					$("#course_name").text(item.course_name);
					
					//alert(item.introduction);
				});
				
			}  
			
            function formatJsonToSeriesTeacher(data){
				//var  datac=  eval("("+data+")");
				$.each(data,function(i,item){
					
					$("#teacher").text(item.name+item.email);
					//alert(item.introduction);
				});
				
			}     	
        
				
             </script> 	 
             
         
         	<script>
			var timer = null;
			box.onclick = function(){
			cancelAnimationFrame(timer);
			timer = requestAnimationFrame(function fn(){
			var oTop = document.body.scrollTop || document.documentElement.scrollTop;
			if(oTop > 0){
				document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
				timer = requestAnimationFrame(fn);
				}else{
			cancelAnimationFrame(timer);
			} 
			});
			}
			</script>
		<script type="text/javascript">
    window.onscroll=function(){
        var top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
        var node=document.getElementById('topbar');
        if(top>20){//20就是滚动条滚动到的位置，大于20才显示
            node.style.display='';
        }else{
            node.style.display='none';
        }
    }
    </script>
   
        
</body>

</html>